<script setup>
import { ref, reactive, onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
// import { fromLonLat, projection } from 'ol/proj'
import XYZ from 'ol/source/XYZ'
// import OSM from 'ol/source/OSM'
import Feature from 'ol/Feature'
import { Point } from 'ol/geom'
import VectorSource from 'ol/source/Vector'
// import VectorTileLayer from 'ol/layer/VectorTile'
import Overlay from 'ol/Overlay'
import Interaction from 'ol/interaction/Interaction'
import VectorImageLayer from 'ol/layer/VectorImage'
import Style from 'ol/style/Style'
// import { getRegionWKT } from '@/api/commonApi'
import Icon from 'ol/style/Icon'
import aicon from '../assets/aicon.svg'
import MapDialog from './MapDialog.vue'
import 'ol/ol.css'


function generateLayer () {
  const vectorSource = new VectorSource({
    features: []
  })

  const vectorLayer = new VectorImageLayer({
    source: vectorSource,
  })
  return vectorLayer
}

function dataHandler (msg) {
  const data = msg.slice(15, -3)
  return data.split(',')
}

onMounted(async () => {
  // const draw = new Interaction.draw({})
  // const data = await getRegionWKT()
  // console.log(data)

  // const coors = dataHandler(data.result.wkt)
  const coors = ['119.36 35.07', '119.03 34', '119.36 33']

  const layer = generateLayer() // 创建锚点图层
  const map = new Map({
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=de5ad7492e083c32ac321d0e7aa97a11'
          // url: 'https://t5.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=7&TILEROW={x}&TILECOL={y}&FORMAT=tiles&tk=de5ad7492e083c32ac321d0e7aa97a11'
        })
      }),
      layer
    ],
    target: 'map',
    view: new View({
      projection: "EPSG:4326",
      center: [128, 31.5],
      zoom: 5,
    })
  })

  const anchors = coors.map(item => {
    const coor = item.split(' ')
    const anchor = new Feature({
      geometry: new Point(coor)
    })
    anchor.setStyle(new Style({
      image: new Icon({
        src: aicon
      })
    }));
    layer.getSource().addFeature(anchor)
    return anchor
  })

  map.getView().on('change:resolution', function () {
    anchors.forEach(anchor => {
      const style = anchor.getStyle();
      // 重新设置图标的缩放率，基于层级20来做缩放
      style.getImage().setScale(this.getZoom() / 5);
      anchor.setStyle(style);
    })

  })

  // 创建弹窗图层
  const popup = new Overlay({
    element: document.getElementById('popup')
  })
  map.addOverlay(popup)

  const closer = document.getElementById('popup-closer')

  closer.onclick = function () {
    popup.setPosition(undefined);
    closer.blur();
    return false;
  };

  map.on('singleclick', (e) => {
    const coordinate = e.coordinate
    const feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
      return feature;
    })
    if (feature) {
      // 弹出popup
      popup.setPosition(coordinate)
    }
  })

})
</script>

<template>
  <div id="map"></div>
  <map-dialog></map-dialog>
</template>

<style lang="less">
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
</style>